<template>
	<view class="all" :style="{'height':widHeight + 'px'}">
		<view class="mypic" @click="info">
			<view class="left">
				<view class="left-img">
					<image class="img" mode="aspectFit" :src="userinfo.avatarUrl"></image>
				</view>
				<view class="left-au">
					<view class="user">{{userinfo.nickName}}</view>
					<view class="account ">账号名:teaxaere123</view>
				</view>
			</view>
			<view class="right">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="set1">
			<u-cell-group>
				<u-cell value="获得精准推荐" title="个人信息收集清单" isLink url="/subStting/my-profile/my-profile"></u-cell>
				<u-cell value="" title="账号与安全" isLink url="/subStting/account-number/account-number"></u-cell>
			</u-cell-group>
		</view>

		<view class="set2">
			<u-cell-group>
				<u-cell value="支付账号、免密支付等" title="支付" isLink url="/subStting/mode-switching/mode-switching"></u-cell>
				<u-cell value="" title="消息通知" isLink url="/subStting/my-news/my-news"></u-cell>
				<u-cell value="换肤" title="主题换肤" isLink url="/subStting/theme-skincare/theme-skincare"></u-cell>

			</u-cell-group>
		</view>

		<view class="set3">
			<u-cell-group>
				<u-cell value="" title="帮助" isLink url="/subStting/my-help/my-help"></u-cell>
				<u-cell value="" title="关于优购" isLink url="/subStting/about-us/about-us"></u-cell>
			</u-cell-group>
		</view>
		<view class="switch-accounts" @click="switchAccounts">
			<u-button text="切换账号"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				widHeight: 0
			};
		},
		computed: {
			...mapState("login", ["userinfo"])
		},
		onLoad() {

			const windowInfo = uni.getWindowInfo()
			this.widHeight = windowInfo.windowHeight //可使用窗口宽度
		},
		onShow(){
			uni.$setNavigationBarColor()
		},
		methods: {
			info() {
				uni.navigateTo({
					url: "/subStting/personal-information/personal-information"
				})
			},
			//切换账号
			switchAccounts() {
				uni.vibrateLong()
				uni.navigateTo({
					url: "/subAbility/switchAccounts/switchAccounts"
				})
			}

		}
	}
</script>

<style lang="scss">
	.all {
		background-color: #eeeeee;

		.switch-accounts {
			font-weight: 700;
		}

		.mypic {
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 15px;

			&:active {
				background-color: #f3f4f6;
			}

			.left-img {
				.img {
					width: 80px;
					height: 80px;
					border-radius: 50%;
				}
			}

			.left {
				display: flex;
				align-content: space-around;
				padding-top: 10px;

				.left-au {
					padding-left: 10px;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.account {
						font-size: 13px;
						color: #c1c1c1;
						padding-bottom: 10px;
					}

					.user {
						padding-top: 10px;
					}
				}
			}
		}

		.set1 {
			background-color: white;
			margin: 10px 0 20px 0;

		}

		.set2 {
			background-color: white;
			margin-bottom: 20px;
		}

		.set3 {
			background-color: white;
			margin-bottom: 20px;
		}
	}
</style>